<template>
  <div style="margin-top: 20px;width: 500px;">
    <!-- <el-button style="margin-top: 15px;" @click="query">图数据切换，动态更新</el-button> -->
    <!-- 带有输入建议的输入框
    // fetch-suggestions 是一个返回输入建议的方法属性
    // :trigger-on-focus="false" 输入值后匹配触发
    -->
    <el-autocomplete
      style="width: 500px"
      class="inline-input"
      v-model="input"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @select="handleSelect"
      clearable
    >
      <!-- <el-select
        v-model="mode"
        slot="prepend"
        placeholder="关键字查询"
      >
        <el-option label="关键字查询" value="1"></el-option>
        <el-option label="单实体查询" value="2"></el-option>
        <el-option label="关联查询" value="3"></el-option>
      </el-select> -->
      <el-button
        slot="append"
        type="success"
        icon="el-icon-search"
        @click="query"
      >搜索</el-button>
    </el-autocomplete>
  </div>
</template>

<script>
export default {
  name: 'gSearch',
  // props: {
  //   isShowPrepend: {
  //     type: Boolean,
  //     default: true
  //   }
  // },
  data () {
    return {
      input: '',
      mode: '1',
      // 后台请求到的json数据
      data: require('../data/data100.json'),
      results: [], // 存放将全部数据集内容处理成建议列表格式后的数据集
      datafiltered: [] // 存放搜索后的结果

    }
  },
  mounted () {
    this.$emit('getData', this.data)// 向父组件传递数据thia.data
    this.results = this.loadAll()
  },
  methods: {
    query () {
      // 点击搜索后，向父组件传递展示的就是搜索匹配后的结果了
      // 进行搜索匹配的api！！！！
      // 现在模拟搜索后的结果是：金英胶囊
      this.datafiltered = require('../data/mock.json')
      if (this.input === '艾附暖宫丸') {
        this.datafiltered = require('../data/mock.json')
      } else if (this.input === '金佛止痛丸') {
        this.datafiltered = require('../data/2.json')
      } else if (this.input === '金刚藤胶囊') {
        this.datafiltered = require('../data/3.json')
      } else if (this.input === '泽桂癃爽片') {
        this.datafiltered = require('../data/4.json')
      }
      this.$emit('getData', this.datafiltered)
    },
    // 用来向el-autocomplete返回建议列表的函数
    querySearch (queryString, cb) {
      var res = this.results
      var results = queryString ? res.filter(this.createFilter(queryString)) : res
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (res) => {
        // .indexOf精确匹配  .match模糊匹配
        return (res.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
      }
    },
    loadAll () {
      // 模拟从后端请求的数据
      this.data = require('../data/data100.json')
      // 处理成建议列表的数据格式
      const a = this.data.map((terminal) => {
        return {
          value: terminal.a.properties.name,
          address: terminal.a.identity
        }
      })
      const b = this.data.map((terminal) => {
        return {
          value: terminal.b.properties.name,
          address: terminal.b.identity
        }
      })
      return this.func(a.concat(b))
    },
    func (objArray) {
      var result = []// 去重后返回的结果数组
      var temp = {}// 临时对象
      // 将对象数组中每一项的value值作为属性，若temp不拥有此属性时则为temp添加此属性且将其值赋为true，并将这一项push到结果数组中
      for (var i = 0; i < objArray.length; i++) {
        var myname = objArray[i].value
        if (temp[myname]) { // 如果temp中已经存在此属性名，则说明遇到重复项
          continue// 不继续执行接下来的代码，跳转至循环开头
        }
        temp[myname] = true// 为temp添加此属性（myname）且将其值赋为true
        result.push(objArray[i])// 将这一项复制到结果数组result中去
      }
      return result
    },
    handleSelect (item) {
      this.queryString = item
      console.log(item)
    }
  }
}
</script>

<style lang='scss' scoped>
.el-select {
  width: 120px;
  // background-color: #fff;
}
.input-with-select .el-input-group__prepend {
  background-color: #6ecbf3;
}
</style>
